<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript">

var layout = [{
                    field: 'Description',
                    name: 'Username',
                    width: '200px'
                },
                {
                    field: 'FirstName',
                    name: 'First Name',
                    width: '200px'
                },
                {
                    field: 'LastName',
                    name: 'Last Name',
                    width: 'auto'
                }];

</script>
<div dojoType="dijit.Toolbar">
	<span dojoType="dijit.form.Button" onClick="dijit.byId('loadDiv').href='<%=request.getContextPath() %>/createUser.htm';dijit.byId('loadDiv').show(); return false;">
        <span>New</span>
    </span>
    <span dojoType="dijit.form.Button">
        <span>Delete</span>
    </span>
    <span dojoType="dijit.form.Button">
        <span>Help</span>
    </span>    
</div>
<br/>
<div dojoType="dijit.TitlePane" title="<b>Users</b>" style="height:80%">
	<!-- Data stores read data from a data store such as a servlet -->
	<div dojoType="dojox.data.QueryReadStore" jsId="userStore" 	url="listUser.htm">
    </div>

	<!-- A grid displays data and offer useful operations such as client sorting -->
	<div id="grid" dojoType="dojox.grid.EnhancedGrid" structure="layout" store="userStore" style="height:80%;"
	plugins="{nestedSorting: true, dnd: true, indirectSelection: true}" rowSelector="0px">
    </div>
</div>
<script>
dojo.addOnLoad(function(){
	var dialog = dijit.byId('loadDiv');
	dialog.reset();
	dialog.titleNode.innerHTML = 'New User';
});
</script>
